<template>
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="10em">
        <el-row type="flex" :gutter="10">
            <el-col :span="24">
                <el-form-item label="分类图标" prop="imgList">
                    <el-upload-image v-model="formData.imgList"></el-upload-image>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="分类名称" prop="name">
                    <el-input v-model="formData.name" placeholder="请输入分类名称" type="text" clearable></el-input>
                </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
                <el-form-item label="上级分类" prop="parent_id">
                    <el-cascader v-model="formData.parent_id" :options="cateList" :props="{
                        value:'id',
                        label:'name'
                    }"></el-cascader>
                </el-form-item>
            </el-col> -->
            <el-col :span="12">
                <el-form-item label="排序" prop="sort">
                    <el-input v-model="formData.sort" placeholder="请输入排序号" type="text" clearable></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="启用状态" prop="status">
                    <el-switch v-model="formData.status" :active-value="1" :inactive-value="0"></el-switch>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row type="flex" justify="center">
            <el-button type="primary" icon="el-icon-check" @click="onConfirm">确认</el-button>
            <el-button type="default" icon="el-icon-close" @click="onCancel">取消</el-button>
        </el-row>
    </el-form>
</template>

<script>
import { post } from "@/assets/js/http.js";

export default {
    name: "goods-type-add",
    components: {
        ElUploadImage: () => import("@/components/el-upload-image.vue")
    },
    props:{
        cateList:Array
    },
    data() {
        return {
            props: {
                label: "name",
                value: "id",
                children: "children",
                checkStrictly: true
            },
            formData: {
                imgList: [],
                // parent_id: [],
                image_id: "",
                name: "",
                sort: "",
                status: 1,
            },
            formRules: {
                imgList: [{
                    required: true,
                    message: '请输入',
                    trigger: 'change'
                }],
                name: [
                    {
                        required: true,
                        message: "此项为必填项"
                    }
                ],

                sort: [
                    {
                        required: true,
                        message: "此项为必填项"
                    },
                    {
                        pattern: /^[1-9]\d*$/,
                        message: "只能输入正整数"
                    }
                ],
                status: {
                    required: true,
                    message: "此项为必填项"
                }
            }
        };
    },
    methods: {
        onConfirm() {
            this.$refs.formRef.validate(async isValid => {
                if (isValid) {
                    const formData = JSON.parse(JSON.stringify(this.formData));
                    // formData.parent_id = formData.parent_id[formData.parent_id.length - 1];
                    if (formData.imgList.length > 0) {
                        formData.image_id =
                            formData.imgList[0].id;
                    }
                    await post({
                        url: "/admin/store.MerchantCate/add",
                        data: formData,
                        loading: true,
                        successTip: true
                    });
                    this.$emit("update");
                    this.$parent.$emit("update:visible", false);
                    this.$refs.formRef.resetFields();
                }
            });
        },
        onCancel() {
            this.$parent.$emit("update:visible", false);
            this.$refs.formRef.resetFields();
        }
    }
};
</script>
